<template>
	<div class="language-select">
		<van-radio-group v-model="checked">
			<van-cell-group>
				<template v-for="(item, index) in list" :key="index">
					<van-cell :title="item.name" clickable @click="isChecked(item)">
						<template #right-icon>
							<van-radio :name="item.value">
								<template #icon="props">
									<img
										v-if="props.checked"
										class="img-icon"
										src="./images/select.svg"
									/>
								</template>
							</van-radio>
						</template>
					</van-cell>
				</template>
			</van-cell-group>
		</van-radio-group>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { apiInit } from '@/services'

const api = apiInit()
const store = useStore()
const router = useRouter()
const status = localStorage.getItem('locale') || 'zh_CN'
const checked = ref(status)
const list = computed(() => store.state.tenant.language_list)
const isChecked = (item: any) => {
	sessionStorage.setItem('returnPathName', history.state.back.slice(1))
	checked.value = item.value
	handlerChange(item.value)
	localStorage.setItem('locale', item.value)
	setTimeout(() => {
		window.location.reload()
	}, 100)
}

const handlerChange = async (value: any) => {
	await api.default.SetLocalLanguagePrivateV2POST({
		query: {
			localLanguage: value,
		},
	})
}
</script>

<style scoped>
.language-select {
	padding-top: 8px;
}
</style>
